<template>
  <!-- <div class="shopsort">
    <div class="shopsort-left">
      <StoreCategory v-model="shopClassificationId" />
    </div>
    <div class="shopsort-right">
      <productCategory :shopClassificationId="shopClassificationId" />
    </div>
  </div> -->
  <div class="shop-class">
    <el-tabs v-model="shopClassificationId">
      <el-tab-pane label="旅游分类 " name="1"></el-tab-pane>
      <el-tab-pane label="电商商品分类" name="2"></el-tab-pane>
      <el-tab-pane label="团购分类" name="3"></el-tab-pane>
    </el-tabs>
    <productCategory :shopClassificationId="Number(shopClassificationId)" />
  </div>
</template>

<script>
import productCategory from './productCategory.vue';
import StoreCategory from './StoreCategory.vue';
export default {
  name: 'ShopSort',
  components: { productCategory, StoreCategory },
  data() {
    return {
      shopClassificationId: '3',

    }
  },


}
</script>

<style scoped lang="scss">
.shop-class {
  padding: 15px;
}

.shopsort {
  display: flex;
  height: calc(100vh - 50px);
  justify-content: space-between;

  &-left {
    flex: 1 1 69%;
    height: 100%;
    overflow-y: auto;
  }

  &-right {
    flex: 1 1 29%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
